{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    {% block content-title %}
        <title>Home</title>
    {% endblock %}
    <meta charset="UTF-8">
    <script src="{% static 'js/jquery.min.js' %}"></script>
    <script src="{% static 'plugins/bootstrap/js/bootstrap.min.js' %}"></script>
    <link rel="stylesheet" href="{% static 'plugins/bootstrap/css/bootstrap.min.css' %}">
    <script src="{% static 'plugins/SweetAlert2/js/sweetalter2.all.min.js' %}"></script>
    <link rel="stylesheet" href="{% static 'plugins/SweetAlert2/css/sweetalert2.min.css' %}">
    <script src="{% static 'plugins/layui/layui/layui.js' %}"></script>
    <link rel="stylesheet" href="{% static 'plugins/layui/layui/css/layui.css' %}">
    {% block head_js %}
    {% endblock %}
    {% block head_css %}
    {% endblock %}
    {% block site-theme %}
    {% endblock %}
</head>
<body>
{% block content-nav %}
    <nav class="navbar navbar-inverse">  <!-- 导航条开始 -->
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">   <!-- BBS点击回首页 / 小屏变形 -->
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="{% url 'home' %}">BBS</a>
            </div>  <!-- BBS点击回首页 / 小屏变形 -->
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">  <!-- 左侧导航菜单 -->
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                           aria-expanded="false">Dropdown <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li><a href="#">Separated link</a></li>
                            <li><a href="#">One more separated link</a></li>
                        </ul>
                    </li>
                </ul>  <!-- 左侧导航菜单结束 -->
                <form class="navbar-form navbar-left" id="form_search">  <!-- 搜索表单 -->
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Search" id="input_search">
                    </div>
                    <button type="submit" class="btn btn-default">百度一下</button>
                </form>  <!-- 搜索表单结束 -->
                <ul class="nav navbar-nav navbar-right" style="display: flex">  <!-- 右侧导航菜单 -->
                    {% if request.user.is_authenticated %}  <!-- 用户登录页面 -->
                        <li><img src="/media/{{ request.user.avatar }}/" alt="头像走丢了"
                                 style="height: 50px;width: 50px;align-items: center" class="img-circle"></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                               aria-haspopup="true"
                               aria-expanded="false">{{ request.user.username }} <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#" data-toggle="modal" data-target="#editPwdModal">修改密码</a></li>
                                <li><a href="#" data-toggle="modal" data-target="#editAvatarModal">修改头像</a></li>
                                <li><a href="{% url 'backend:backend' %}">后台管理</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="{% url 'user:logout' %}">退出登录</a></li>
                            </ul>
                        </li>
                    {% else %}  <!-- 用户未登录页面 -->
                        <li><a href="{% url 'user:register' %}">注册</a></li>
                        <li><a href="{% url 'user:login' %}">登录</a></li>
                    {% endif %}
                </ul>  <!-- 右侧导航菜单结束 -->
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav> <!-- 导航条结束 -->
{% endblock %}
<div class="container-fluid">
    <div class="row">
        {% block content %}
            <div class="col-md-2 advertisement_inclusion">
                {% load blog_inclusion_tags %}
                {% adv_main %}
            </div> <!-- 左侧广告栏 -->
            <div class="col-md-8 home_main">
                {% block content-main %}
                    <div class="layui-carousel" id="ID-carousel-demo-1">
                        <div carousel-item>
                            {% for adv_obj in adv_all %}
                                {% if adv_obj.is_background %}
                                    <div>
                                        <a href="">
                                            <img src="/media/{{ adv_obj.img }}/" alt="图片走丢了"
                                                 style="width: 888px;height: 288px">
                                        </a>
                                    </div>
                                {% else %}
                                    <div>
                                        <h1 style="text-align: center;">轮播图优势广告位在线招商</h1>
                                    </div>
                                {% endif %}
                            {% endfor %}
                        </div>
                    </div><!--轮播图结束 -->
                    <br>
                    {% for article_datum in article_data %}
                        <ul class="media-list">
                            <li class="media">
                                <h4 class="media-heading"><a
                                        href="{% url 'article:detail' article_datum.blog.userinfo.username article_datum.pk %}">{{ article_datum.title }}</a>
                                </h4>
                                <div class="media-left">
                                    <a href="#">
                                        <img class="media-object" src="/media/{{ article_datum.blog.userinfo.avatar }}/"
                                             alt="作者头像走丢了" width="55px" height="70px">
                                    </a>
                                </div>
                                <div class="media-body">
                                    <p>{{ article_datum.desc }}</p>
                                    <br>
                                    <p>
                                        <span>【<a
                                                href="/blog/{{ article_datum.blog.userinfo.username }}/">{{ article_datum.blog.userinfo.username }}</a>】</span>
                                        <span>发布于</span>
                                        <span>{{ article_datum.create_time|date:'Y-m-d H:i:s' }}&nbsp;&nbsp;</span>
                                        <span> <span
                                                class="glyphicon glyphicon-thumbs-up"></span>{{ article_datum.up_count }}&nbsp;&nbsp;</span>
                                        <span> <span
                                                class="glyphicon glyphicon-thumbs-down"></span>{{ article_datum.down_count }}&nbsp;&nbsp;</span>
                                        <span> <span
                                                class="glyphicon glyphicon-comment"></span>{{ article_datum.comment_count }}&nbsp;&nbsp;</span>
                                    </p>
                                </div>
                                <hr>
                            </li>
                        </ul>
                    {% endfor %} <!-- 文章详细展示 -->
                    <div class="text-center">{{ page_html|safe }}</div>  <!-- 分页器位置 -->
                {% endblock %}
            </div> <!-- 首页主题部分 -->
            <div class="col-md-2 advertisement_inclusion">
                {% load blog_inclusion_tags %}
                {% adv_main %}
            </div>  <!-- 右侧广告栏 -->
        {% endblock %}
    </div>
</div>

<!-- 修改密码模态框 -->
<div class="modal fade" id="editPwdModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">修改密码</h4>
            </div>
            <form id="editPwdForm">
                {% csrf_token %}
                <div class="modal-body">
                    <div class="form-group">  {# 用户名显示 #}
                        <label for="username">用户名 :</label>
                        <input type="text" id="username" name="username" value="{{ request.user.username }}" disabled
                               class="form-control">
                    </div>
                    <div class="form-group">  {# 旧密码校验 #}
                        <label for="old_password">原密码 :</label>
                        <input type="password" id="old_password" name="old_password" class="form-control">
                    </div>
                    <div class="form-group">  {# 新密码校验 #}
                        <label for="new_password">新密码 :</label>
                        <input type="password" id="new_password" name="new_password" class="form-control">
                    </div>
                    <div class="form-group">
                        <label for="id_captcha">验证码</label>
                        <div class="row">
                            <div class="col-md-9"><input type="text" id="id_captcha" class="form-control"
                                                         name="captcha"></div>
                            <div class="col-md-3"><img src="{% url 'user:verify_code' %}" alt="图片验证码"
                                                       id="captcha_img"
                                                       onclick="this.src='{% url 'user:verify_code' %}'+'?t='+ new Date().getTime();">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <input type="button" class="btn btn-primary" id="editPwdSave" value="保存修改">
                </div>
            </form>
        </div>
    </div>
</div><!-- 修改密码模态框结束 -->
<!-- 修改头像模态框 -->
<div class="modal fade" id="editAvatarModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">修改头像</h4>
            </div>
            <form id="editAvatarForm" enctype="multipart/form-data">
                {% csrf_token %}
                <div class="modal-body">
                    <div class="form-group">  {# 原头像展示 #}
                        <label for="old_avatar">原头像 :</label>
                        <img src="/media/{{ request.user.avatar }}/" alt="头像走丢了" id="old_avatar"
                             style="height: 55px;width: 55px">
                    </div>
                    <div class="form-group">
                        <label for="new_avatar">修改的头像 : <span>
                            <img src="/media/{{ request.user.avatar }}/" alt="头像走丢了" id="img_new_avatar"
                                 style="height: 55px;width: 55px">
                        </span></label>
                        <input type="file" id="new_avatar" name="new_avatar" style="display: none">
                    </div>
                    <div class="form-group">
                        <label for="id_captcha">验证码</label>
                        <div class="row">
                            <div class="col-md-9"><input type="text" id="id_avatar_captcha" class="form-control"
                                                         name="captcha"></div>
                            <div class="col-md-3"><img src="{% url 'user:verify_code' %}" alt="图片验证码"
                                                       id="captcha_img"
                                                       onclick="this.src='{% url 'user:verify_code' %}'+'?t='+ new Date().getTime();">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <input type="button" class="btn btn-primary" id="editAvatarSave" value="保存修改">
                </div>
            </form>
        </div>
    </div>
</div><!-- 修改密码模态框结束 -->
</body>
<script>
    window.addEventListener("resize", function () {
        let windowWidth = window.innerWidth;
        if (windowWidth < 1000){
            $('.advertisement_inclusion').addClass('hidden')
            $('.home_main').addClass('col-md-offset-2')
        }else {
            $('.advertisement_inclusion').removeClass('hidden')
            $('.home_main').removeClass('col-md-offset-2')
        }
    });
</script>
<script>  // 百度搜索 + 实时渲染修改的头像
$(document).ready(function () {
        // 声明搜索函数
        let func_search = function search() {
            let txt = $("#input_search").val();
            let next_url = 'https://www.baidu.com/s' + '?wd=' + txt
            window.open(next_url, '_blank')
        };  // 声明函数结束
        // 阻止搜索的form表单提交 执行函数
        $("#form_search").submit(function (event) {
            event.preventDefault()
            func_search()
        });  // 执行函数结束
        $('#new_avatar').change(function () {
                {#声明FileReader对象#}
                let fileReader = new FileReader();
                {#获取文件数据#}
                let fileData = $(this)[0].files[0];
                fileReader.readAsDataURL(fileData);
                {#等待文件加载完再执行渲染，保重图片的数据完整渲染#}
                fileReader.onload = () => {
                    $('#img_new_avatar').attr('src', fileReader.result);
                }
            }
        );
    } // ready(){} end
) // ready end

</script>  <!-- 百度搜索 + 实时渲染修改的头像 -->
<script>  // 修改密码 修改头像
$(document).ready(function () {
    // 修改密码
    $('#editPwdSave').click(function () {
        let formData = new FormData();
        let formDataArray = $('#editPwdForm').serializeArray();
        $.each(formDataArray, function (index, data_dict) {
            formData.append(data_dict.name, data_dict.value)
        })
        $.ajax({
            url: '{% url 'user:editPassword' %}',
            type: 'post',
            data: formData,
            processData: false,
            contentType: false,
            success: function (response) {
                if (response.code === 200) {
                    Swal.fire({
                        title: response.msg,
                        showCancelButton: false,
                        confirmButtonText: "确认",
                    }).then((result) => {
                        if (result.isConfirmed) {
                            window.location.href = '{% url 'home' %}';
                        }
                    })
                } else {
                    Swal.fire({
                        icon: "error",
                        title: "Oops...",
                        text: response.errors,
                    });
                }
            }
        })
    }) // 修改密码结束
    // 修改头像
    $('#editAvatarSave').click(function () {
        let formData = new FormData();
        let new_avatar = $('#new_avatar')[0].files[0];
        formData.append('new_avatar', new_avatar);
        formData.append('captcha', $('#id_avatar_captcha').val());
        formData.append('csrfmiddlewaretoken', '{{ csrf_token }}');
        $.ajax({
            url: '{% url 'user:editAvatar' %}',
            type: 'post',
            data: formData,
            processData: false,
            contentType: false,
            success: function (response) {
                if (response.code === 200) {
                    Swal.fire({
                        title: response.msg,
                        showCancelButton: false,
                        confirmButtonText: "确认",
                    }).then((result) => {
                        if (result.isConfirmed) {
                            window.location.href = '{% url 'home' %}';
                        }
                    })
                } else {
                    Swal.fire({
                        icon: "error",
                        title: "Oops...",
                        text: response.errors,
                    });
                }
            }
        })
    }) // 修改头像结束
})
</script> <!-- 修改密码 修改头像 -->
<script>  // 轮播图
layui.use(function () {
    let carousel = layui.carousel;
    // 渲染 - 常规轮播
    carousel.render({
        elem: '#ID-carousel-demo-1',
        width: 'auto',
        interval: 1800,
        anim: 'fade',
    });
});
</script> <!-- 轮播图 -->
<!-- 樱花飘落特效 -->
<script src="https://blog-static.cnblogs.com/files/blogs/688431/%E6%A8%B1%E8%8A%B1%E7%89%B9%E6%95%88.js"></script>
</html>